<template>
	<view class="technician-order-update-addr pt-md" :style="{background:pageColor}" v-if="isLoad">
		<view class="ml-md mr-md fill-base f-paragraph radius-24" style="padding:45rpx 30rpx;color: #131313;">
			<view class="f-title text-bold" style="color: #010101;">修改地址</view>
			<view style="margin: 46rpx 0 30rpx 0;">服务地址</view>
			<view @tap.stop="toChooseLocation" class="input-item pd-lg radius-16">
				<view class="flex-between">
					<view :class="[{'c-caption':!form.address}]">{{form.address || rule[0].errorMsg}}</view>
					<i class="iconfont icondizhi_1" :style="{color: primaryColor}"></i>
				</view>
			</view>
			<view style="margin: 46rpx 0 30rpx 0;">门牌号</view>
			<view class="input-item pd-lg radius-16">
				<input v-model="form.address_info" type="text" :placeholder="rule[1].errorMsg"
					placeholder-class="f-paragraph c-caption" />
			</view>
		</view>

		<view class="space-max-footer"></view>

		<fix-bottom-button @cancel="$util.goUrl({url:1,openType:`navigateBack`})" @confirm="submit"
			:text="[{ text: '取消', type: 'cancel' }, { text: '确定修改', type: 'confirm' }]"
			bgColor="#fff"></fix-bottom-button>

		<!-- #ifdef MP-WEIXIN -->
		<user-privacy ref="user_privacy" :show="false"></user-privacy>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<longbingbing-app-check-auth type="location" ref="app_check_item"
			@confirm="toConfirmChooseLoca"></longbingbing-app-check-auth>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				isLoad: false,
				options: {},
				form: {
					order_id: 0,
					address: '',
					address_info: '',
					province: '',
					city: '',
					area: '',
					lng: '',
					lat: ''
				},
				rule: [{
						name: "address",
						checkType: "isNotNull",
						errorMsg: "请选择服务地址"
					},
					{
						name: "address_info",
						checkType: "isNotNull",
						errorMsg: "请输入某酒店/XX房间(某小区/XX号)",
						regType: 2
					},
				],
				lockTap: false
			}
		},
		computed: mapState({}),
		onLoad() {
			this.initIndex()
		},
		methods: {
			...mapMutations(['updateUserItem', 'updateOrderItem']),
			async initIndex() {
				let {
					id: order_id,
					address_info
				} = this.$util.getPage(-1).detail
				let data = this.$util.pick(address_info, ['lat', 'lng', 'address', 'address_info', 'province', 'city',
					'area'
				])
				this.form = Object.assign({}, data, {
					order_id
				})
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				this.isLoad = true
				// #ifdef H5
				this.$jweixin.hideOptionMenu()
				// #endif
			},
			initRefresh() {
				this.initIndex()
			},
			// 选择地区
			async toChooseLocation() {
				// #ifdef APP-PLUS
				if (plus.os.name == 'Android' && plus.navigator.checkPermission(
						'android.permission.ACCESS_FINE_LOCATION') ===
					'undetermined') {
					this.$refs.app_check_item.open()
				} else {
					this.toConfirmChooseLoca()
				}
				// #endif
				// #ifndef APP-PLUS
				this.toConfirmChooseLoca()
				// #endif
			},
			async toConfirmChooseLoca() {
				// #ifdef MP-WEIXIN
				let privacyCheck = this.$refs.user_privacy.check()
				if (privacyCheck) {
					this.$refs.user_privacy.open()
					return
				}
				// #endif
				let {
					lat,
					lng,
					name,
					address
				} = await this.$util.chooseLocation()
				if (!lat && !lng) return
				if (name && !address) {
					this.$util.showToast({
						title: `请选择具体的地址`
					})
					return
				}
				let {
					province,
					city,
					area
				} = await this.$util.getCityAddr(address)
				let form = Object.assign({}, this.form, {
					lat,
					lng,
					address,
					address_info: name,
					province,
					city,
					area
				})
				this.form = form
			},
			//表单验证
			validate(param) {
				let validate = new this.$util.Validate();
				this.rule.map(item => {
					let {
						name,
					} = item
					validate.add(param[name], item);
				})
				let message = validate.start();
				return message;
			},
			async submit() {
				let param = this.$util.deepCopy(this.form)
				let msg = this.validate(param);
				if (msg) {
					this.$util.showToast({
						title: msg
					});
					return;
				}
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					if (!param.province) {
						let {
							province,
							city,
							area
						} = await this.$util.getCityAddr(param.address)
						param = Object.assign({}, param, {
							province,
							city,
							area
						})
					}
					await this.$api.technician.updateOrderAddress(param)
					this.$util.hideAll()
					this.$util.showToast({
						title: `修改成功`,
					});
					setTimeout(() => {
						this.$util.back()
						this.$util.goUrl({
							url: 1,
							openType: `navigateBack`
						})
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			}
		}
	}
</script>


<style lang="scss">
	.technician-order-update-addr {
		.input-item {
			width: 650rpx;
			min-height: 36rpx;
			line-height: 36rpx;
			background: #F9FAF9;
		}
	}
</style>